<template>
    <div class="playBox">
        <!-- 循环播放 -->
        <div>
            <svg width="30px" height="30px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>Repeat-Play</title>
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Repeat-Play">
                        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="24" height="24">

                        </rect>
                        <path d="M5,18.0002 L17,18.0002 C18.6569,18.0002 20,16.657 20,15.0002 L20,14" id="Path"
                            stroke="#0C0310" stroke-width="2" stroke-linecap="round">

                        </path>
                        <path d="M16,2 L19.2929,5.29289 C19.6834,5.68342 19.6834,6.31658 19.2929,6.70711 L16,10" id="Path"
                            stroke="#0C0310" stroke-width="2" stroke-linecap="round">

                        </path>
                        <path d="M8,14 L4.70711,17.2929 C4.31658,17.6834 4.31658,18.3166 4.70711,18.7071 L8,22" id="Path"
                            stroke="#0C0310" stroke-width="2" stroke-linecap="round">

                        </path>
                        <path d="M19,6 L7,6 C5.34315,6 4,7.34315 4,9 L4,10" id="Path" stroke="#0C0310" stroke-width="2"
                            stroke-linecap="round">

                        </path>
                    </g>
                </g>
            </svg>
        </div>
        <!-- 上一首歌 -->
        <div>
            <svg width="30px" height="30px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" @click="goToPrevOrNext(-1)">
                <title>Prev</title>
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Prev">
                        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="24" height="24">

                        </rect>
                        <path
                            d="M8.66288,12.4218 L18.2316,18.511 C18.5644,18.7228 19,18.4837 19,18.0892 L19,5.91084 C19,5.51629 18.5644,5.27718 18.2316,5.48901 L8.66288,11.5782 C8.35413,11.7746 8.35413,12.2254 8.66288,12.4218 Z"
                            id="Path" stroke="#0C0310" stroke-width="2" stroke-linecap="round">

                        </path>
                        <line x1="5" y1="5" x2="5" y2="19" id="Path" stroke="#0C0310" stroke-width="2"
                            stroke-linecap="round">

                        </line>
                    </g>
                </g>
            </svg>
        </div>
        <!-- 暂停 -->
        <div v-show="!musicPlay2.audioPlay" @click="stopOrPlay">
            <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g id="Media / Play">
                    <path id="Vector"
                        d="M5 17.3336V6.66698C5 5.78742 5 5.34715 5.18509 5.08691C5.34664 4.85977 5.59564 4.71064 5.87207 4.67499C6.18868 4.63415 6.57701 4.84126 7.35254 5.25487L17.3525 10.5882L17.3562 10.5898C18.2132 11.0469 18.642 11.2756 18.7826 11.5803C18.9053 11.8462 18.9053 12.1531 18.7826 12.4189C18.6418 12.7241 18.212 12.9537 17.3525 13.4121L7.35254 18.7454C6.57645 19.1593 6.1888 19.3657 5.87207 19.3248C5.59564 19.2891 5.34664 19.1401 5.18509 18.9129C5 18.6527 5 18.2132 5 17.3336Z"
                        stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </g>
            </svg>
        </div>
        <!-- 开始 -->
        <div v-show="musicPlay2.audioPlay" @click="stopOrPlay">
            <svg width="40px" height="40px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink">
                <title>Pause</title>
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Pause">
                        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="24" height="24">

                        </rect>
                        <rect id="Rectangle" stroke="#0C0310" stroke-width="2" stroke-linecap="round" x="15" y="5" width="3"
                            height="14" rx="1.5">

                        </rect>
                        <rect id="Rectangle" stroke="#0C0310" stroke-width="2" stroke-linecap="round" x="6" y="5" width="3"
                            height="14" rx="1.5">

                        </rect>
                    </g>
                </g>
            </svg>
        </div>
        <!-- 下一首 -->
        <div>
            <svg width="30px" height="30px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" @click="goToPrevOrNext(1)">
                <title>Next</title>
                <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Next">
                        <rect id="Rectangle" fill-rule="nonzero" x="0" y="0" width="24" height="24">

                        </rect>
                        <path
                            d="M15.3371,12.4218 L5.76844,18.511 C5.43558,18.7228 5,18.4837 5,18.0892 L5,5.91084 C5,5.51629 5.43558,5.27718 5.76844,5.48901 L15.3371,11.5782 C15.6459,11.7746 15.6459,12.2254 15.3371,12.4218 Z"
                            id="Path" stroke="#0C0310" stroke-width="2" stroke-linecap="round">

                        </path>
                        <line x1="19" y1="5" x2="19" y2="19" id="Path" stroke="#0C0310" stroke-width="2"
                            stroke-linecap="round">

                        </line>
                    </g>
                </g>
            </svg>
        </div>
        <!-- 音量 -->
        <div class="volumeBox">
            <svg width="30px" height="30px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" @click="showVolume2">
                <title>Volume-minus</title>
                <g id="🖥-Landing" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <g id="Artboard" transform="translate(-74.000000, -63.000000)">
                        <g id="Volume-minus" transform="translate(74.000000, 63.000000)">
                            <rect id="Rectangle" x="0" y="0" width="24" height="24">

                            </rect>
                            <path
                                d="M4,11 C4,9.89543 4.89543,9 6,9 L7.33333,9 C7.76607,9 8.18714,8.85964 8.53333,8.6 L10.4,7.2 C11.0592,6.70557 12,7.17595 12,8 L12,16 C12,16.824 11.0592,17.2944 10.4,16.8 L8.53333,15.4 C8.18714,15.1404 7.76607,15 7.33333,15 L6,15 C4.89543,15 4,14.1046 4,13 L4,11 Z"
                                id="Path" stroke="#0C0310" stroke-width="2" stroke-linecap="round">

                            </path>
                            <path d="M15.5355,15.3997 C17.4881,13.4471 17.4881,10.2812 15.5355,8.32861" id="Path"
                                stroke="#0C0310" stroke-width="2" stroke-linecap="round">

                            </path>
                            <path d="M12,13 C12.5523,13 13,12.5523 13,12 C13,11.4477 12.5523,11 12,11" id="Path"
                                stroke="#0C0310" stroke-width="2" stroke-linecap="round">

                            </path>
                        </g>
                    </g>
                </g>
            </svg>
            <div v-show="showVolume" class="showVolume">
                <div class="notvolumeLevelProgress" ref="slider">
                    <div class="volumeLevelDot" id="volumeLevelDot" ref="dot" @mousedown="startMoveVolume"
                        @mousemove="moveVolume" @mouseup="stopMoveVolume">
                    </div>
                </div>
                <div class="volumeLevelValue">
                    {{ volume }}%
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import { musicPlay2 } from '@/utils/playMusic'
import { ref, Ref, onMounted } from 'vue'

let showVolume = ref<boolean>(false)
const slider: Ref<HTMLDivElement | null> = ref(null)
const dot: Ref<HTMLDivElement | null> = ref(null)
const isClick = ref(false)
const volume = ref<number>(musicPlay2.audioVolume)

const startMoveVolume = () => {
    isClick.value = true
}

const stopMoveVolume = () => {
    isClick.value = false
}

const moveVolume = (event: MouseEvent) => {
    if (isClick.value && slider.value && dot.value) {
        const containerRect = slider.value.getBoundingClientRect()
        const circleRect = dot.value.getBoundingClientRect()
        const limitY = containerRect.height - circleRect.height
        const y = event.clientY - containerRect.y - circleRect.height / 2
        const top = Math.min(limitY, Math.max(0, y))
        dot.value.style.top = `${top}px`
        // console.log(top)
        volume.value = Math.round(Math.round(-(top - 100)))
        if (volume.value > 100) {
            volume.value = 100
        } else if (volume.value < 0) {
            volume.value = 0
        }
        musicPlay2.updateVolume(volume.value)
    }
}

const showVolume2 = () => {
    showVolume.value = !showVolume.value
}

const stopOrPlay = () => {
    let data = musicPlay2.StopOrPlay()
    if (data == null) {
        return ElMessage({
            message: '当前无音乐哦',
            type: 'warning',
        })
    }
}

const goToPrevOrNext = (num: number) => {
    let data = musicPlay2.NextOrPrev(num)
    if (data != true) {
        return ElMessage({
            message: data,
            type: 'warning',
        })
    }
}

onMounted(() => {
    // console.log(musicPlay2.audioVolume)
    if (dot.value) {
        dot.value.style.top = `${100 - musicPlay2.audioVolume}px`
    }
})

</script>

<style lang="scss" scoped>
.playBox {
    // width: 200px;
    margin-left: 35px;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
        margin-right: 5px;

        svg {
            cursor: pointer;
        }
    }

    .stopMusic {
        display: none
    }

    .volumeBox {
        position: relative;

        .showVolume {
            position: absolute;
            z-index: 12;
            width: 55px;
            height: 165px;
            background-color: var(--volumeBackGround);
            transform: translate(-50%);
            left: 50%;
            top: -165px;
            border-radius: 7px;

            .notvolumeLevelProgress {
                width: 4px;
                height: 115px;
                background-color: rgb(241, 237, 237);
                position: relative;
                text-align: center;
                margin: 0 auto;
                margin-top: 15px;
                margin-bottom: 13px;

                .volumeLevelDot {
                    height: 15px;
                    width: 15px;
                    background-color: rgb(255, 255, 255);
                    border-radius: 50%;
                    cursor: pointer;
                    position: absolute;
                    left: 50%;
                    /* top: 50%; */
                    transform: translate(-50%);
                    bottom: 0;
                }
            }

            .volumeLevelValue {
                margin: 0 auto;
                text-align: center;
                margin-top: 10px;
                font-size: 17px;
                font-weight: 600;
                color: white;
            }
        }
    }
}
</style>